import { defineComponent, ref } from 'vue'
import { ElInput } from 'element-plus'
import { Input, Table } from 'ant-design-vue'

export default defineComponent({
  setup() {
    const counter = ref(0)

    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ]

    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ]

    return () => (
      <div>
        <h1> Element </h1>
        <h2>{counter.value} </h2>
        <ElInput type='text' v-model={counter.value} />
        <hr />
        <h1> Antd </h1>
        <h2>{counter.value} </h2>
        <Input type='text' value={counter.value} onChange={(e) => (counter.value = e.target.value)} />
        <Table dataSource={dataSource} columns={columns} />
      </div>
    )
  },
})
